<template>
  <div class="wrapper">
    <!-- 顶部一级导航 -->
    <v-head></v-head>
    <!-- 左侧导航栏 / 二级 -->
    <v-sidebar :menuList="menuList"></v-sidebar>
    <!-- 中间主体内容 -->
    <div class="content-box" v-if="!isIndex" :class="{'content-collapse':collapse}">
      <!-- 面包屑 -->
      <v-tags></v-tags>
      <div class="content table-content">
        <transition name="fade-transform" mode="out-in">
          <keep-alive :include="tagsList">
            <router-view></router-view>
          </keep-alive>
        </transition>
      </div>
    </div>
    <div class="content-box" v-if="isIndex">
      <v-tags></v-tags>
      <div class="content table-content">
        <transition name="fade-transform" mode="out-in">
          <keep-alive :include="tagsList">
            <router-view></router-view>
          </keep-alive>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
import vHead from "../common/Header.vue";
import vSidebar from "../common/Sidebar.vue";
import vTags from "../common/Tags.vue";
import bus from "../common/bus";
export default {
  data() {
    return {
      tagsList: [],
      collapse: false,
      isIndex: false,
      menuList:[
        {
          index: "1",
          icon: "el-icon-s-operation",
          name: "学习管理",
          children: [
            {
              index: "2",
              icon: "el-icon-film",
              name: "xx管理",
              children: [
                {
                  index: "/demo",
                  icon: "el-icon-date",
                  name: "xx信息",
                },
                {
                  index: "/demo3",
                  icon: "el-icon-document-copy",
                  name: "xx管理",
                },
                {
                  index: "/demo33",
                  icon: "el-icon-document",
                  name: "xx商品",
                }
              ],
            },
            {
              index: "/demo1",
              icon: "el-icon-share",
              name: "xx管理",
            },
            {
              index: "/demo2",
              icon: "el-icon-s-help",
              name: "xx状态",
            },
          ],
        },
        {
          index: "2",
          icon: "el-icon-s-platform",
          name: "xx追溯",
          children: [],
        }
      ]
    };
  },
  components: {
    vHead,
    vSidebar,
    vTags,
  },
  created() {
    bus.$on("collapse", (msg) => {
      this.collapse = msg;
    });
    bus.$on("isIndex", (msg) => {
      this.isIndex = msg;
    });
    // 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
    bus.$on("tags", (msg) => {
      let arr = [];
      for (let i = 0, len = msg.length; i < len; i++) {
        msg[i].name && arr.push(msg[i].name);
      }
      this.tagsList = arr;
    });
  },
};
</script>